<template>
    <div>
        <div class="container" style="justify-content: space-between;min-height: 800px;">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="5" :lg="5">
                    <div class="l-left" style="height:auto;border: 1px solid #eee;">
                  <div style="line-height: 60px;font-size: 18px;font-weight:500;border-bottom: 1px dashed #eee;">
                      <i class="el-icon-menu"/>组织机构
                  </div>
                  <el-tree
                          :data="tagsList"
                          :props="props"
                          :load="loadNode"
                          highlight-current
                          lazy
                          @node-click="handleNodeClick"
                          @node-expand="handleNodeClick"
                          ref="tree"
                          node-key="id"
                          >
                  </el-tree>
              </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="19" :lg="19">
                    <div class="content-show" style="border: 1px solid #eee;">
                       <all :childrenData="demoData" @fatherGetSubOrgList="getSubOrgList" @fatherRefreshLazyData="refreshLazyData"></all>
                    </div>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
    import {regionalRoot,getSubOrgList} from  '../../../api/index';
    import all from './All';
    export default {
        name: 'RegionalManagement',
        data() {
            return {

                props: {
                    label: 'orgName',
                    children: 'zones',
                    isLeaf: 'leaf'
                },

                tagsList:[],
                demoData:'',
                clickedId:'',
                lazyInitData:[],
                lazyNode:null,
                lazyResolve:null,
                clickNode:null,
                clikData:null,
            }
        },
        components:{
            all
        },
        created(){
          this.getData();
        },

        methods: {
            loadNode(node, resolve) {
                this.lazyNode = node;
                this.lazyResolve = resolve;
                if (node.level === 0) {
                    return resolve(this.tagsList);
                }
                // if (node.level > 1) return resolve([]);

                setTimeout(() => {
                    console.log(this.clickedId)
                    getSubOrgList({
                        pid:this.clickedId
                    }).then((res)=>{
                        console.log(res)
                        this.lazyInitData = res.datas;

                        resolve(this.lazyInitData);
                    })


                }, 500);
            },

            handleNodeClick(data,node) {
                console.log(data);
                console.log(node.parent);

                this.clikData = data;
                this.clickNode = node;
                if(data.pid === 0){
                    this.clickedId = data.id;
                    this.demoData = data;
                    this.demoData['pname'] = data.orgName;
                    return ;
                }
                this.clickedId = data.id;
                this.demoData = data;
                this.demoData['pname'] = node.parent.data.orgName;

                var parentName = [];
                function forMapParent(node) {
                    if(node.parent&&node.parent.data.pid>=0){
                        parentName.push(node.parent.data.orgName)
                        forMapParent(node.parent)
                    }else{
                        return ;
                    }
                }
                forMapParent(node);
                if(data.id<=0){
                    this.demoData['orgFullPath'] = data.orgName;
                }else{
                    this.demoData['orgFullPath'] =  parentName.reverse().join('/') + '/'+data.orgName;
                }
                console.log(parentName.reverse())
                // this.getSubOrgList();
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //获取数据
            getData(){
                regionalRoot({

                }).then((res) =>{
                    console.log(res)
                    // this.tagsList.root=res.expandData.root;
                    // this.tagsList.children=res.expandData.childrens;
                    var dataArr = new Array();
                    dataArr[0] = res.expandData.root;
                    dataArr[0]['children'] = res.expandData.childrens;
                    this.tagsList = dataArr;

                    this.clickedId = this.tagsList[0].id;
                    console.log(dataArr)
                })
            },
            toStr(num){
                return num.toString();
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);

                var demoObj = {};
                this.clickedId = key;
                for(var i=0;i<this.tagsList[0].children.length;i++){
                    if(key == this.tagsList[0].children[i].id){
                        demoObj = this.tagsList[0].children[i]
                        demoObj['pname'] = this.tagsList[0].orgName;
                    }
                }
                this.demoData = demoObj;
                this.getSubOrgList();
            },
            getSubOrgList(){
                console.log(this.clickedId)
                getSubOrgList({
                    pid:this.clickedId
                }).then((res)=>{
                    console.log(res)
                    this.lazyInitData = res.datas;
                })
            },
            refreshLazyData(add){
                if(!add){
                    this.clickedId = this.demoData.pid;
                    const parent = this.clickNode.parent;
                    const children = parent.childNodes||[];
                    const index = children.findIndex(d => d.data.id === this.clikData.id);
                    children.splice(index, 1);
                }else{

                    getSubOrgList({
                        pid:this.clickedId
                    }).then((res)=>{
                        console.log( this.$refs.tree.store.nodesMap[this.clikData.id].childNodes)
                        console.log(this.clickNode)
                        this.lazyNode.childNodes = [];
                        this.clickNode.childNodes = [];
                        this.$refs.tree.updateKeyChildren(this.clickNode.key, res.datas)
                        return;

                        if (!this.clickNode.children) {
                            this.$set(this.clickNode, 'children', []);
                        }
                        this.clickNode.children.push(res.datas[res.datas.length-1])

                    })

                }
            },

        },
    }

</script>

<style>
.container{
    /*padding-top:0 !important;*/
}
.group-btn{
    margin:10px 0;
}
el-form-item{
    line-height: 30px;
}
    h4{
        line-height: 36px;
    }
    .el-icon-my-export:before{
        content: "替";
        font-size: 12px;
        width:16px !important;
        visibility: hidden;
    }

.el-icon-my-location:before{
    content: "替";
    font-size: 12px;
    width:16px !important;
    visibility: hidden;
}
</style>

